<template>
  <h2>SvgIcon</h2>
  <p><svg-icon name="file" /></p>

  <h2>Mention Input</h2>
  <mention-input
    :dataSource="getMentionDataSource"
    @done="handlerSend"
  ></mention-input>

  <h2>Table View</h2>
  <TableView
    v-model:instance="tableRef"
    :data="data"
    :columns="columns"
    v-model:selected="selectedIds"
  />
  {{ selectedIds }}
</template>

<script setup>
const memberList = [
  {
    id: "10000",
    value: "胡歌",
  },
  {
    id: "10001",
    value: "林更新",
  },
  {
    id: "10002",
    value: "陈坤",
  },
  {
    id: "10003",
    value: "迪丽热巴",
  },
  {
    id: "10004",
    value: "杨幂",
  },
  {
    id: "10005",
    value: "白敬亭",
  },
  {
    id: "10006",
    value: "周杰伦",
  },
  {
    id: "10007",
    value: "杨超越",
  },
];

const getMentionDataSource = (searchTerm, mentionChar) => {
  const filterList = memberList.filter(
    (item) => item.value.indexOf(searchTerm) !== -1
  );

  return filterList;
};

const handlerSend = (params) => {
  console.log(params);
};

// table view
const data = ref([
  {
    id: 1,
    name: "胡歌",
    date: "2021-01-01",
    age: 20,
    gender: 1,
    content:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, dolore",
  },
  {
    id: 2,
    name: "范冰冰",
    date: "2021-01-01",
    age: 20,
    gender: 0,
    content:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, dolore",
  },
]);

const columns = ref([
  {
    type: "selection",
  },
  {
    title: "姓名",
    dataIndex: "name",
  },
  {
    title: "年龄",
    renderHtml: (row) => {
      return row?.age > 18 ? "成年人" : "未成年";
    },
  },
  {
    title: "性别",
    render: (row) => {
      return h("div", {}, row.gender == 1 ? "男" : "女");
    },
  },
  {
    title: "操作",
    slotName: "action",
  },
]);
const tableRef = ref(null);
const selectedIds = ref([1]);

setTimeout(() => {
  console.log(tableRef.value);
  tableRef.value.clearSelection();
}, 2000);
</script>

<style scoped></style>
